<template>
  <div>
    <ul>
      <li class="recLi" v-for="rec of recs" @click="getDetails(rec)">
        <img class="headImg" :src="rec.memId.headImgUrl"/>
        <div class="infoArea">
          <p class="info_name">{{rec.memId.nickname}}</p>
        </div>
        <el-button @click="contact(rec)" v-if="rec.isFriend==0">接受</el-button>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    name: '',
    data(){
      return {
        recs:[
          { 
            memId: {
              headImgUrl:'',
              nickname:'',
            }  
          },
        ],
      }
    },
    mounted: function(){
      this.getFriendApply();
      

     },
    methods: {
      getFriendApply() {
        this.$http({
          method: 'get',
          url: 'friend/listApply',          
        }).then((response)=>{
          if(response && response.data.status == 'SUCCESS') {
            this.recs = response.data.object;
            for(var i=0; i<this.recs.length; i++) {
              this.recs[i].isFriend = 0;
              if(this.recs[i].memId.headImgUrl != null){
                this.recs[i].memId.headImgUrl = this.$img + this.recs[i].memId.headImgUrl
              }else {
                tthis.recs[i].memId.headImgUrl = initImg
              }
            }
            this.getFriends();
          }else {

          }
        }).catch((err)=>{  
        })
      },
      getFriends(){
        this.$http({
          method: 'get',
          url: 'friend/listFriend',          
        }).then((response)=>{
          if(response && response.data.status == 'SUCCESS') {
            for(var i=0; i<response.data.object.length; i++) {
              this.recs.push(response.data.object[i])
              this.recs[recs.length-1].isFriend = 1;
              if(this.recs[recs.length-1].memId.headImgUrl != null){
                this.recs[recs.length-1].memId.headImgUrl = this.$img + this.recs[recs.length-1].memId.headImgUrl
              }else {
                tthis.recs[recs.length-1].memId.headImgUrl = initImg
              }
            }
          }else {

          }
        }).catch((err)=>{  
        })
      },
      contact(){

      }
    },
  }
</script>
<style scoped>
  .recLi{
    display: flex;
    align-items: center;
    margin: 15px;
    padding: 5px;
    border: 1px solid #80808057;
    border-radius: 0.8em;
  }
  .headImg{
    width: 6em;
    height: 6em;
    padding: 0.5em;
    margin: 0.5em;
  }
  .infoArea{
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 4em;
  }
  .info_name{
    font-size: 1.2em;
    font-weight: 500;
    color: #f85377;
  }
  .info_more{
    margin-right: 1.5em;
  }
  .info_intro{
    width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>